<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestzz";;

export default {
  name: "chartringchartguanwang",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: ""
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryDbPipenet": {
      handler: function(n, o) {
        this.loadData(n);
      }
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var option = {
      title: {
        text: "管网供热面积",
        textStyle: {
          color: "#fff",
          fontSize: 36 * scale,
          fontWeight: "bold"
        }
      },
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
        textStyle: {
          fontWeight: "normal",
          fontSize: 30 * scale
        }
      },
      series: [
        {
          type: "pie",
          radius: ["45%", "60%"],
          hoverAnimation: true,
          color: ["#5957C2", "#76FBC0", "#FCC708", "#29C6FA"],
          data: [
            {
              value: 0, //表格中加载过了 所以不用再调用ajax
              name: "一号管网"
            },
            {
              value: 0,
              name: "二号管网"
            },
            {
              value: 0,
              name: "三号管网"
            },
            {
              value: 0,
              name: "四号管网"
            }
          ].sort(function(a, b) {
            return a.value - b.value;
          }),
          // roseType: 'radius',
          label: {
            normal: {
              textStyle: {
                fontSize: 30 * scale
              },
              formatter: function(params, ticket, callback) {
                return (
                  "{white|" +
                  params.name +
                  "}\n{blue|" +
                  params.value +
                  "}{white|万㎡}"
                );
              },
              rich: {
                white: {
                  color: "#fff",
                  fontSize: 30 * scale,
                  padding: [10, 0]
                },
                blue: {
                  color: "#53F3F3",
                  fontSize: 32 * scale
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 30 * scale,
              length2: 50 * scale,
              lineStyle: {
                width: 5
              }
            }
          }
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(pipenetDataObj) {
      this.options.series[0].data = [
        {
          value:
            pipenetDataObj["sa_001heatare@1"] ||
            pipenetDataObj["sa_001heatare@1"] == 0
              ? Number(pipenetDataObj["sa_001heatare@1"] / 10000).toFixed(1)
              : 0, //表格中加载过了 所以不用再调用ajax
          name: "一号管网"
        },
        {
          value:
            pipenetDataObj["sa_001heatare@2"] ||
            pipenetDataObj["sa_001heatare@2"] == 0
              ? Number(pipenetDataObj["sa_001heatare@2"] / 10000).toFixed(1)
              : 0,
          name: "二号管网"
        },
        {
          value:
            pipenetDataObj["sa_001heatare@3"] ||
            pipenetDataObj["sa_001heatare@3"] == 0
              ? Number(pipenetDataObj["sa_001heatare@3"] / 10000).toFixed(1)
              : 0,
          name: "三号管网"
        },
        {
          value:
            pipenetDataObj["sa_001heatare@4"] ||
            pipenetDataObj["sa_001heatare@4"] == 0
              ? Number(pipenetDataObj["sa_001heatare@4"] / 10000).toFixed(1)
              : 0,
          name: "四号管网"
        }
      ].sort(function(a, b) {
        return a.value - b.value;
      });

      this.myChart.setOption(this.options);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>